<main class="app">
	<div class="ui container main-container">

		<header class="title animated">
			<h1>
				<a href="./">
					<span>C</span>
					<span>O</span>
					<span>D</span>
					<span>E</span>
					<span>L</span>
					<span>F</span>
				</a>
			</h1>
		</header>

		<header class="title animated">
			<h1>
				<a href="./">
					<span>J</span>
					<span>U</span>
					<span>X</span>
					<span>i</span>
					<span>a</span>
					<span>O</span>
					<span>B</span>
					<span>a</span>
				</a>
			</h1>
		</header>
	</div>
</main>

<style>
	
	@font-face {
	    font-family:'Dressedless Three';
	    src:url(fonts/Dressedless_Three.ttf) format("truetype"), url(fonts/Dressedless_Three.svg) format("svg")
	}
	
	.app .main-container .title.animated span {
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
		animation-timing-function: cubic-bezier(.4, 0, .2, 1);
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
		-webkit-animation-duration: 250ms;
		animation-duration: 250ms;
		-webkit-animation-delay: 100ms;
		animation-delay: 100ms;
	}

	.app .main-container .title span {
		font-family: "Dressedless Three", Lato, Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		font-size: 3.5rem;
		font-weight: 100;
	}

	.app .main-container .title a,
	.app .main-container .title a:active,
	.app .main-container .title a:hover,
	.app .main-container .title a:link,
	.app .main-container .title a:visited {
		color: inherit;
		text-decoration: none;
	}

	@media screen and (min-width: 50rem) {
		.app .main-container .title span {
			font-size: 5rem
		}
	}

	.app .main-container .title.animated span:nth-child(1) {
		color: #4285f4
	}

	.app .main-container .title.animated span:nth-child(2) {
		color: #db4437
	}

	.app .main-container .title.animated span:nth-child(3) {
		color: #f4b400
	}

	.app .main-container .title.animated span:nth-child(4) {
		color: #4285f4
	}

	.app .main-container .title.animated span:nth-child(5) {
		color: #0f9d58
	}

	.app .main-container .title.animated span:nth-child(6) {
		color: #db4437
	}

	.app .main-container .title.animated span:nth-child(7) {
		color: #6435c9
	}

	.app .main-container .title.animated span:nth-child(8) {
		color: #a333c8
	}
</style>
